<template>
    <div class="mian">
        <keep-alive>
<router-view></router-view>
        </keep-alive>
        <footer class="bottom-nav">
            <router-link to="/mian/chaxun" class="foot_img foot_img_1"><img src="../assets/images/zhanwei.png"></router-link>
             <router-link to="/mian/report" class="foot_img  foot_img_2"><img src="../assets/images/zhanwei.png"></router-link>
            <router-link to="/mian/me" class="foot_img foot_img_3"><img src="../assets/images/zhanwei.png"></router-link>
            <!--<router-link  to="/mian/ropert"> ropert</router-link>-->
        </footer>

    </div>
</template>

<script>
    export default {
        name: 'mian',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import "../assets/css/user.css";
    .mian{
        height: 100%;
        background: #ffffff;
    }
    .router-link-active.foot_img_1{
        background: url("../assets/images/tab_inquiry_press@2x.png") no-repeat center;
        background-size: auto 50px;
    }
    .router-link-active.foot_img_2{
        background: url("../assets/images/tab_record_press@2x.png") no-repeat center;
        background-size: auto 50px;
    }
    .router-link-active.foot_img_3{
        background: url("../assets/images/tab_personal_press@2x.png") no-repeat center;
        background-size: auto 50px;
    }
</style>
